<template>
	<view class="content">
		<view v-if="historyStore.list">
			<uni-icons class="sortimg" slot="searchIcon" color="#0000ee" size="18" :type="historyStore.up"
				@click="historyStore.toggleSortOrder" />
		</view>
		<view class="content">
			<uni-list v-for="(item, index) in historyStore.list" :key="index" style="width: 82%;margin-left: 3%;"
				v-if="historyStore.list.length" class="itemImg">
				<uni-list-item :clickable="historyStore.getClickable">
					<template v-slot:header>
						<text class="slot-text">{{index + 1}}、</text>
						<image class="img" :src="item.imgUrl" mode="scaleToFill" @click="historyStore.Preview(index)" />
					</template>
					<template v-slot:body>
						<text style="margin-left: 20rpx;" class="slot-text">{{item.date}}</text>
						<uni-icons class="rmImg" size="23" color="#ff0000" type="closeempty"
							@click="historyStore.delImg(item.fileName)" />
					</template>
				</uni-list-item>
				<!-- 添加横线 -->
				<view class="underline"></view>
			</uni-list>
			<uni-load-more :status="historyStore.status" @clickLoadMore="historyStore.addList"
				:contentText="historyStore.contentText"></uni-load-more>
			<pinappEmptyPage v-if="historyStore.list.length==0"></pinappEmptyPage>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		getCurrentInstance
	} from "vue";
	import pinappEmptyPage from "@/components/pinapp-empty-page/pinapp-empty-page.vue";
	import {
		useHistoryStore
	} from '@/stores/historyStore';
	const historyStore = useHistoryStore();
	const instance = getCurrentInstance();

	historyStore.getData();

	// 点击预览照片
	historyStore.Preview = function(index) {
		
		const img = [];
		img.push(historyStore.list[index].imgUrl);
		uni.previewImage({
			urls: img,
			longPressActions: {
				itemList: ['发送给朋友', '保存照片', '收藏', '删除'],
				success: function(data) {},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	};
</script>

<style scoped lang="scss">
	@import url('@/static/styles/history.css');
</style>